import CommonTable from '@/components/CommonTable';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons';
import { Popover, Space, Input } from 'antd';
import { ComparisonTitleTips } from '../helpers/constant';
import { useEffect, useRef, useState } from 'react';
import { cloneDeep, find } from 'lodash';
import useImportOrderStore from '../../../importOrder';
import Api from '../../../service';

//更新id
let updateId;

const requireFile = ['店铺订单号', '商品编码', '收货地址'];

const ExcelMap = ({ }) => {

	//自定义字段配置
	const [fieldConfig, setFieldConfig] = useState([]);

	//编辑弹框
	const inputRef = useRef(null);

	//当前编辑的id
	const [editId, setEditId] = useState();

	const query = useImportOrderStore(state => state.query);

	const columns = [
		{
			title: '标准列名', dataIndex: 'name', width: 140, render: (t, r) => {
				const arr = query.productImportType == 1 ? [ ...requireFile, '数量'] : requireFile;
				if (arr.includes(t)) {
					return <span><span style={{ color: '#F03D29', marginRight: '2px' }}>*</span>{t}</span>
				}
				return t;
			}
		},
		{
			title: '自定义列名', dataIndex: 'alias', width: 140, render: (t, r) => {
				if (r.id == editId) {
					return <Input ref={inputRef} maxLength={15} size="small" defaultValue={t} onBlur={(e) => saveColumnsValue(e, r)}  />
				}
				return (
					<div>
						<span>{t}</span>
						<EditOutlined onClick={() => handleEdit(r.id)} style={{ color: '#0068FF', cursor: 'pointer', marginLeft: '4px' }} />
					</div>
				)
			}
		},
	];

	//初始化获取配置
	useEffect(() => {
		getFieldConfig();
	}, [])

	//获取字段自定义配置
	const getFieldConfig = async () => {
		const params = {
			type: 1,
			useType: 1,
		}
		const { success, data } = await Api.getFieldMappingConfig(params)
		if (success) {
			const res = await Api.getFieldByUser(params);
			if (res.success) {
				const arr = res.data.mappingList;
				updateId = res.data.id;
				if (arr.length > 0) {
					for(let i in arr) {
						if(arr[i].alias) {
							const obj = find(data, ['columnName', arr[i].columnName]);
							obj.alias = arr[i].alias;
						}
					}
				}
				setFieldConfig(data);
			}
		}
	}

	//点击编辑
	const handleEdit = val => {
		setEditId(val);
	}

	//点击编辑之后聚焦
	useEffect(() => {
		inputRef.current?.input.focus();
	}, [editId])


	//保存数据
	const saveColumnsValue = (e, r) => {
		const val = e.target.value;
		const arr = cloneDeep(fieldConfig);
		const obj = find(arr, ['id', r.id]);
		setFieldConfig(arr);
		if(obj) {
			obj.alias = val;
		}
		const params = {
			id: updateId,
			mappingDetail: JSON.stringify(arr)
		}
		Api.updateFileConfig(params);
		setEditId();
	}

	const TableProps = {
		data: fieldConfig,
		columns,
		bordered: true
	}

	return (
		<Space direction="vertical" size={20} style={{ marginTop: '-42px' }}>
			<SubTitle
				title={
					<>
						自定义格式对照
						<Popover content={ComparisonTitleTips} overlayStyle={{ maxWidth: 300 }}>
							<QuestionCircleOutlined style={{ marginLeft: 8, cursor: 'pointer' }} />
						</Popover>
					</>
				}
				as="s2"
				symbol
			/>
			<div style={{ width: 280 }}>
				<CommonTable {...TableProps} />
			</div>
		</Space>
	);
};

export default ExcelMap;
